<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap5 实例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="StyleSheet" href="../css/bootstrap.min.css" type="text/css" media="screen"/>
    <link rel="StyleSheet" href="../css/backstage.css" type="text/css" media="screen"/>
    <script src="../js/jquery-3.6.0.js"></script>
    <script src="../js/bootstrap.bundle.js"></script>

    <script type="text/javascript">
        $(function() {
            //准备工作
            let workingOderId = "";
            let check1 = $('#check1');
            let check2 = $('#check2');
            let check3 = $('#check3');
            let check4 = $('#check4');
            let userNameKeywords = $('#userName-key-words');
            let orderIdKeywords = $('#orderId-key-words');

            //重新全选多选框
            function recheck() {
                check1.prop('checked', true);
                check2.prop('checked', true);
                check3.prop('checked', true);
                check4.prop('checked', true);
            }

            //更新页面上的订单表
            function updateOrderTable(data) {
                var html="";
                for(var i=0;i<data.length;i++){
                    html+="<tr id='" +data[i].orderId+ "'>"+
                        "<td>" + data[i].orderId +  "</td>" +
                        "<td>" + data[i].username +  "</td>" +
                        "<td>" + data[i].orderDate + "</td>" +
                        "<td>" + data[i].shipAddress1 + "</td>" +
                        "<td>" + data[i].shipState + "</td>" +
                        "<td>" + data[i].totalPrice + "</td>" +
                        "<td>" + data[i].status + "</td>" +
                        "<td>" +
                        "<div class='btn-group' role='group' aria-label='Basic example'>" +
                        "<button type='button' class='btn btn-primary modify-order operation-btn' data-bs-toggle='modal' data-bs-target='#modifyOrder'>Modify</button>" +
                        "<button type='button' class='btn btn-primary remove-order operation-btn' data-bs-toggle='modal' data-bs-target='#removeOrder'>Remove</button>" +
                        "</div>" +
                        "</td>" +
                        "</tr>"
                }
                $('#orderIdContent').html(html);
            }

            //为所有的modify按钮绑定单击事件
            function bindOrderModify() {
                $('.modify-order').each(function () {
                    $(this).on('click',function () {
                        const orderRow = this.parentNode.parentNode.parentNode;
                        workingOrderId = $(orderRow).attr('id');
                        //发送ajax请求
                        $.get('/backstage/ajaxGetWorkingOrder','orderId=' + workingOrderId,function (data){
                            console.log(data);
                            $('#modify-order-id').val(data.orderId);
                            $('#modify-order-username').val(data.username);
                            $('#modify-order-shipAddress').val(data.shipAddress1);
                            $('#modify-order-shipState').val(data.shipState);
                            $('#modify-order-totalPrice').val(data.totalPrice);
                            $('#modify-order-status').val(data.status);
                        });
                    });
                });
            }

            //为所有的remove按钮绑定单击事件
            function bindOrderRemove() {
                //为delete-order按钮绑定事件
                $('.remove-order').each(function () {
                    $(this).on('click',function () {
                        const orderRow = this.parentNode.parentNode.parentNode;
                        workingOderId = $(orderRow).attr('id');
                        //发送ajax请求
                        $.get('/backstage/ajaxRemoveOrder','orderId=' + workingOderId,function (){
                            $(orderRow).remove();
                        });
                    });
                });
            }

            //为根据订单号查找商品绑定事件
            $('#searchByOrderId').on('submit',function (){
                $('#userName-key-words').val('');
                recheck();
                $.get("/backstage/ajaxGetOrdersByOrderId",'orderId='+orderIdKeywords.val(),function (data){
                    updateOrderTable(data);
                })
                bindOrderModify();
                bindOrderRemove();
                return false;
            })

            //为根据用户名查找订单绑定状态
            $('#searchByUserName').on('submit',function (){
                $('#orderId-key-words').val('');
                recheck();
                $.get("/backstage/ajaxGetOrdersByUserName",'userName='+userNameKeywords.val(),function (data){
                    updateOrderTable(data);
                })
                bindOrderModify();
                bindOrderRemove();
                return false;
            })

            //为modify-save按钮绑定单击事件
            $('#modify-order-save').on('click', function () {
                $.post({
                    url:"/backstage/ajaxUpdateOrder",
                    data:{
                        'orderId': $('#modify-order-id').val(),
                        'username': $('#modify-order-username').val(),
                        'shipAddress1': $('#modify-order-shipAddress').val(),
                        'shipState': $('#modify-order-shipState').val(),
                        'totalPrice': $('#modify-order-totalPrice').val(),
                        'status': $('#modify-order-status').val()
                    },
                    success: function (data) {
                        console.log(data);
                        let orderRow = $('#' + workingOrderId);
                        let tds = orderRow.children('td');
                        tds[0].innerText = data.orderId;
                        tds[1].innerText = data.username;
                        tds[2].innerText = data.orderDate;
                        tds[3].innerText = data.shipAddress1;
                        tds[4].innerText = data.shipState;
                        tds[5].innerText = data.totalPrice;
                        tds[6].innerText = data.status;

                        $('#close-modify-order').click();
                    }
                });
            })

            //为cancel按钮绑定单击事件
            $('#cancel-modify-order').on('click', function () {
                $('#close-modify-order').click()
            })

            //为复选框绑定单击事件
            $('.check-order-status').each(function () {
                $(this).on('click',function () {
                    orderIdKeywords.val('');
                    if(userNameKeywords.val() == ''){
                        $.post({
                            url:"/backstage/ajaxGetOrdersByStatus",
                            data:{
                                'check1': check1.prop('checked'),
                                'check2': check2.prop('checked'),
                                'check3': check3.prop('checked'),
                                'check4': check4.prop('checked')
                            },
                            success: function (data) {
                                console.log(data);
                                updateOrderTable(data);
                                bindOrderModify();
                                bindOrderRemove();
                            }
                        });
                    }else{
                        $.post({
                            url:"/backstage/ajaxGetOrdersByUserNameAndStatus",
                            data:{
                                'username' : userNameKeywords.val(),
                                'check1': check1.prop('checked'),
                                'check2': check2.prop('checked'),
                                'check3': check3.prop('checked'),
                                'check4': check4.prop('checked')
                            },
                            success: function (data) {
                                console.log(data);
                                updateOrderTable(data);
                                bindOrderModify();
                                bindOrderRemove();
                            }
                        });
                    }
                });
            })

            bindOrderModify();
            bindOrderRemove();
        })

    </script>

</head>
<body>
<main class="border-bottom bg-color">
    <div class="bg-dark my-nav">
        <header class="d-flex py-3">
            <a href="/" class="text-white text-decoration-none">
                <svg class="bi me-2" width="40" height="32"></svg>
                <span class="fs-4">MyPetStore后台管理系统</span>
            </a>

            <svg class="bi me-2" width="100" height="32"></svg>

            <ul class="nav nav-pills">
                <li class="nav-item"><a href="/backstage/main" class="nav-link" aria-current="page">Home</a></li>
                <li class="nav-item"><a href="/backstage/commodity" class="nav-link">商品管理</a></li>
                <li class="nav-item"><a href="/backstage/account" class="nav-link">账号管理</a></li>
                <li class="nav-item"><a href="/backstage/order" class="nav-link active">订单管理</a></li>
            </ul>

        </header>
    </div>

    <div class="bg-color">
        <div class="my-div bg-light radius">
            <div class="small-div">
                <table>
                    <tr>
                        <td>
                            <form id="searchByOrderId" class="d-flex">
                                <input id="orderId-key-words" name="orderId" th:value="${session.keywords}" class="form-control me-2" type="searchByOrderId" placeholder="输入订单号" aria-label="Search"/>
                                <button class="btn btn-outline-success text-nowrap" type="submit">搜索</button>
                            </form>
                        </td>

                        <td>
                            <svg class="bi me-2" width="48" height="25"></svg>
                        </td>

                        <td class="search-td">

                            <form id="searchByUserName" class="d-flex">
                                <input id="userName-key-words" name="userName" th:value="${session.keywords}" class="form-control me-2" type="search" placeholder="输入用户名" aria-label="Search">
                                <button class="btn btn-outline-success text-nowrap" type="submit">搜索</button>
                            </form>
                        </td>
                    </tr>
                </table>

                <svg class="bi me-2" width="24" height="25"></svg>

                <form>
                    <table>
                        <tr>
                            <td>
                                <input class="form-check-input check-order-status" id="check1" type="checkbox" name="option1" checked="true">
                                <label class="form-check-label">待发货</label>
                            </td>

                            <td>
                                <svg class="bi me-2" width="48" height="25"></svg>
                            </td>

                            <td>
                                <input class="form-check-input check-order-status" id="check2" type="checkbox" name="option1" checked="true">
                                <label class="form-check-label">已发货</label>
                            </td>

                            <td>
                                <svg class="bi me-2" width="48" height="25"></svg>
                            </td>

                            <td>
                                <input class="form-check-input check-order-status" type="checkbox" id="check3" name="option1" checked="true">
                                <label class="form-check-label">已签收</label>
                            </td>

                            <td>
                                <svg class="bi me-2" width="48" height="25"></svg>
                            </td>

                            <td>
                                <input class="form-check-input check-order-status" type="checkbox" id="check4" name="option1" checked="true">
                                <label class="form-check-label">已取消</label>
                            </td>
                        </tr>
                    </table>
                </form>
<!--                <form id="searchByOrderState" class="d-flex">-->
<!--                    <input id="orderState-key-words" name="orderState" th:value="${session.keywords}" class="form-control me-2" type="search" placeholder="输入订单状态" aria-label="Search">-->
<!--                    <button class="btn btn-outline-success text-nowrap" type="submit">SearchByOrderState</button>-->
<!--                </form>-->
            </div>

            <hr>

            <div>
                <table class="table text-center my-table" id="user-table">
                    <thead class="table-dark">
                    <tr>
                        <th>OrderId</th>
                        <th>UserName</th>
                        <th>OrderDate</th>
                        <th>ShipAddress</th>
                        <th>ShipState</th>
                        <th>TotalPrice</th>
                        <th>Status</th>
                        <th>Operation</th>
                    </tr>
                    </thead>

                    <tbody id="orderIdContent">
                    <tr th:each="order:${session.orderList}" th:id="${order.orderId}">
                        <td th:id="|test${order.orderId}|" th:text="${order.orderId}"></td>
                        <td th:text="${order.username}"></td>
                        <td th:text="${#dates.format(order.orderDate, 'yyyy-MM-dd HH:mm:ss')}"></td>
                        <td th:text="${order.shipAddress1}"></td>
                        <td th:text="${order.shipState}"></td>
                        <td th:text="${order.totalPrice}"></td>
                        <td th:text="${order.status}"></td>

                        <td>
                            <div class="btn-group" role="group" aria-label="Basic example">
                                <button type="button"  class="btn btn-primary modify-order operation-btn" data-bs-toggle="modal" data-bs-target="#modifyOrder">
                                    Modify
                                </button>
                                <button type="button"  class="btn btn-primary remove-order operation-btn" data-bs-toggle="modal" data-bs-target="#removeOrder">
                                    Remove
                                </button>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
        </div>
    </div>



    <div class="modal" id="modifyOrder">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">Modify Order Information</h4>
                    <button id="close-modify-order" type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <!-- 模态框内容 -->
                <div class="modal-body">
                    <div>
                        <label class="text-black">Order Id:</label>
                        <input id="modify-order-id" type="text" class="form-control" placeholder="Order Id" disabled>
                    </div>
                    <div>
                        <label class="text-black">Username:</label>
                        <input id="modify-order-username" type="text" class="form-control" placeholder="Username">
                    </div>
                    <div>
                        <label class="text-black">Ship Address:</label>
                        <input id="modify-order-shipAddress" type="text" class="form-control" placeholder="Ship Address">
                    </div>
                    <div>
                        <label class="text-black">Ship State:</label>
                        <input id="modify-order-shipState" type="text" class="form-control" placeholder="Ship State">
                    </div>
                    <div>
                        <label class="text-black">Total Price:</label>
                        <input id="modify-order-totalPrice" type="text" class="form-control" placeholder="Total Price">
                    </div>
                    <div>
                        <label class="text-black">Status:</label>
                        <select class="form-select-sm" aria-label="Default select example" id="modify-order-status">
                            <option value="待发货">待发货</option>
                            <option value="已发货">已发货</option>
                            <option value="已签收">已签收</option>
                            <option value="已取消">已取消</option>
                        </select>
                    </div>
                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button id="cancel-modify-order" type="button" class="btn btn-outline-primary">Cancel</button>
                    <button id="modify-order-save" class="btn btn-primary" type="submit">Save</button>
                </div>
            </div>
        </div>
    </div>
</main>

</body>
</html>